<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>选择入住城市</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css">

</head>
<body style="cursor: pointer">
    <ul id="tab-target">
    </ul>
</body>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/extend/doT.min.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>

<script id="hotel_img_list" type="text/x-dot-template">
    {{ for(let i=0;i < it.length;i++){ }}
        <li class="aui-col-xs-4 layui-photos" style="border-right:1px solid #fff;border-bottom:1px solid #fff;border-top: none;">
            <img src="{{= it[i].imageAddr }}" layer-src="{{= it[i].imageAddr }}" alt="{{= it[i].imageType}}" style="width:100%;" data-index="{{= i}}">
        </li>
    {{ } }}
</script>
<script>
    apiready = function(){
        api.parseTapmode();
        let hotelData = JSON.parse($api.getStorage("hotel_data"));
        var param = {};
        param.url = Config.hotel.getHotelImages;
        param.data = {
            "hotel_id" : hotelData.hotel_id,
            "is_paging" : false
        };
        console.log($api.jsonToStr(param));
        ajax(param,function (ret) {
            console.log($api.jsonToStr(ret));
            let tpl = $("#hotel_img_list").html();
            $("#tab-target").append(doT.template(tpl)(ret.data));

            let arr = [];
            for (var i in ret.data) {
                arr.push(ret.data[i].imageAddr);
            }

            var photoBrowser = api.require('photoBrowser');

            $('body').on('click','.aui-col-xs-4',function(){
                let i = $(this).find('img').attr('data-index');
                let src = $(this).find('img').attr('src');
                // console.log(i);
                // console.log(src);

                photoBrowser.open({
                    images: arr,
                    placeholderImg: 'widget://res/img/apicloud.png',
                    bgColor: '#000',
                    activeIndex : i
                }, function(ret, err) {
                    if (ret) {
                        // alert(JSON.stringify(ret));
                        if (ret.eventType == 'click') {
				          					photoBrowser.close();
        								}

                    } else {
                        alert(JSON.stringify(err));
                    }
                });
            });
        });
    }

</script>
</html>
